<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../../lib/header/header.min.css"/>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css"  >
    <link rel="stylesheet" href="../../lib/layer-tool/layer.css"  >
    <link rel="stylesheet" href="../../lib/bootstrap-tool/bootstrap.css"  >
    <script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../lib/jtopo-tool/jtopo-0.4.8-min.js"></script>
    <script type="text/javascript" src="../../lib/layer-tool/layer.js"></script>

</head>
<body onload="allnode()">
<div class="layui-main" style="width: 95%;margin:30px auto">
    <div style="padding: 10px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">

            <!--    表格位置-->
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body" style="width: 90%;margin: 0 auto; ">
                            <div class="layui-form-item">
                                <div class="layui-inline demoTable" >
                                    <button class="layui-btn" data-type="getCheckData">选定终端</button>
                                    <!--        <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>-->
                                    <!--        <button class="layui-btn" data-type="isAll">验证是否全选</button>-->
                                </div>
                                <div class="layui-inline layui-form" style="margin-left: 20px ; " >
                                    <select name="check" lay-verify="routing" id="selectroute">
                                        <option value="0">请选择一个路由策略</option>
                                        <option value="1" >默认</option>
                                        <option value="2">星型拓扑</option>
                                        <option value="3">可靠路由算法</option>
                                        <option value="4">分簇算法</option>
                                    </select>
                                </div>
                                <div class="layui-inline ">
                                    <button type="button" class="layui-btn layui-btn-primary" id="help"><i class="layui-icon layui-icon-help"></i></button>
                                </div>
                            </div>
                        <div style="width: 100%;margin: 10px auto 0;">
<!--                            <table class="layui-table" lay-data="{width: 750, height:600, url:'http://localhost:9876/routing/allterminal', page:true, limit:20, id:'terms'}" lay-filter="terms">-->
                            <table class="layui-table" lay-data="{height:600, url:'http://localhost:9876/routing/allterminal', page:true, limit:20, id:'terms'}" lay-filter="terms">

                                <thead>
<!--                                <tr>-->
<!--                                    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>-->
<!--                                    <th lay-data="{field:'id', sort: true, width:85 }">ID</th>-->
<!--                                    <th lay-data="{field:'rank', sort: true , width:85}">等级</th>-->
<!--                                    <th lay-data="{field:'power',  sort: true}">能量</th>-->
<!--                                    <th lay-data="{field:'range',  sort: true}">通信范围</th>-->
<!--                                    <th lay-data="{field:'x'}">X坐标</th>-->
<!--                                    <th lay-data="{field:'y' }">Y坐标</th>-->
<!--                                </tr>-->
                                    <tr>
                                        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                                        <th lay-data="{field:'id', sort: true, width: 65}">ID</th>
                                        <th lay-data="{field:'rank', sort: true, width: 65}">等级</th>
                                        <th lay-data="{field:'power',  sort: true}">能量</th>
                                        <th lay-data="{field:'range',  sort: true}">通信范围</th>
                                        <th lay-data="{field:'x', width: 65}">X坐标</th>
                                        <th lay-data="{field:'y', width: 65}">Y坐标</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="layui-row" id="input" style=" display:none">
                            <form class="layui-form layui-form-pane" action="" lay-filter="example" id="example">
                                <div class="layui-form-item layui-row" style=" width: 100%;margin: 10px auto 0">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">输入起点</label>
                                            <div class="layui-input-inline">
                                                <input type="text"   autocomplete="off" class="layui-input" name="fromid">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">输入终点</label>
                                            <div class="layui-input-inline">
                                                <input type="text"  autocomplete="off" class="layui-input" name="toid">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <button type="button" class="layui-btn layui-btn-sm" id="btn2">提交</button>
                                            <button type="button" class="layui-btn layui-btn-sm " id="btn3">重置</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        <!--   <div class="layui-row" id='route' style="display:none; margin: 0 auto;">-->
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">网络拓扑展示</div>
                    <div class="layui-card-body" id="route" style=" width: 90%;margin: 10px auto 0;">
                        <div class="layui-row" id="topo" >
            <!--            <div class="layui-row" id="topo" style="  width: 90%;margin: 15px auto 0">-->
<!--                            <canvas id="test" height="610" width="800" style="border: 2px solid #e8e8e8;"></canvas>-->
                            <canvas id="test" height="610" width="600" style="border: 2px solid #e8e8e8;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    <!--    自适应canvas的宽度-->
    console.log($('#route').width());
    console.log($('#test').attr('width'));
    $('#test').attr('width', $('#route').width());
</script>


<script>
    var checknode=[]; //节点全局

    var goodlink=[];
    var badlink=[];

    //arr为了标记高亮
    var arr=new Array();
    for(var i=0;i<2;i++){
        arr[i]=new Array();
        for(var j=0;j<2;j++){
            arr[i][j]=0;
        }
    }

    let map = new Map(); //簇间路由，{id,[簇头id,link]}
    <!-- 监听复选框   -->
    var canvas = document.getElementById('test');
    var stage = new JTopo.Stage(canvas);
    var scene = new JTopo.Scene(stage);

    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;
        //监听表格复选框选择
        table.on('checkbox(terms)', function(obj){
            //console.log(obj)
        });
        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据data是nodes list[]
                var checkStatus = table.checkStatus('terms')
                    ,data = checkStatus.data;
                var myselect = document.getElementById('selectroute');
                var index=myselect.selectedIndex ;  // selectedIndex代表的是你所选中项的index
                var type = myselect.options[index].value;
                myselect.options[index].text;
                console.info(type);
                if(type==1){
                    if (data.length<8&&data.length>2) {
                        var styleElement = document.getElementById('input');
                        styleElement.style.display = 'none';
                        startopo(data);
                    } else if(data.length<3){
                        layer.alert("选择终端个数不能少于3个！");
                    } else if(data.length>7&&data.length<13){
                        routingtopo(data);
                    }else {
                        var styleElement = document.getElementById('input');
                        styleElement.style.display = '';
                        liantopo(data);
                    }
                }else if(type==0){
                    layer.alert("请选择一种路由策略！");
                }else if(type==2){ //星型拓扑
                    if (data.length>2) {
                        var styleElement = document.getElementById('input');
                        styleElement.style.display = 'none';
                        startopo(data);
                    } else if(data.length<3){
                        layer.alert("选择终端个数不能少于3个！");
                    }
                }else if(type==3){ //可靠性
                    if(data.length<3){
                        layer.alert("选择终端个数不能少于3个！");
                    } else if(data.length>3&&data.length<13){
                        routingtopo(data);
                    }else {
                        layer.alert("选择终端个数多于12个，不满足路由算法条件，请重新选择终端！");
                    }
                }else if(type==4){
                    if(data.length<3){
                        layer.alert("选择终端个数不能少于3个！");
                    }else if(data.length>=12){
                        var styleElement = document.getElementById('input');
                        styleElement.style.display = '';
                        liantopo(data);
                    }else {
                        layer.alert("选择终端个数不足12个，不满足分簇条件，请重新添加终端！");
                    }
                }
            }
        };

        //监听顶部按钮栏
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听路由线路按钮
        layui.$('#btn2').on('click', function(){
            var data = form.val('example');
            var fromid = data.fromid;
            var toid = data.toid;
            if(checknode[fromid]&&checknode[toid]&&fromid!=toid){

                if(checknode.length<13) {
                    $("#example")[0].reset();
                    drawroute(fromid, toid);
                    $('#btn2').addClass("layui-btn-disabled").attr("disabled", true);
                }
                if(checknode.length>=13){
                    $("#example")[0].reset();
                    drawdevideroad(fromid, toid);
                    $('#btn2').addClass("layui-btn-disabled").attr("disabled", true);
                    //$('#btn3').addClass("layui-btn-disabled").attr("disabled", true);
                    var styleElement = document.getElementById('btn3');
                    styleElement.style.display = 'none';
                }
            }else {
                layer.msg('Wrong ID!');
                $("#example")[0].reset();
            }
        });

        layui.$('#btn3').on('click', function(){
            $('#btn2').removeClass("layui-btn-disabled").attr("disabled",false);
            reset();
        });

        var html ='            <div style="padding: 20px; background-color: #F2F2F2;">\n' +
            '                <div class="layui-row layui-col-space15">\n' +
            '                    <div class="layui-col-md12">\n' +
            '                        <div class="layui-card">\n' +
            '                            <div class="layui-card-header">路由策略概述</div>\n' +
            '                            <div class="layui-card-body">\n' +
            '                                1.星型拓扑：在所选终端中根据选举算法选出一个班长节点，担任通信中心节点（伪簇头）。<br>\n' +
            '                                2.可靠路由：适用于小规模自组网，考虑链路可靠性，得到单向和双向链路，保证传输在两跳内进行。<br>\n' +
            '                                3.分簇算法：在终端节点数过多时，宜进行分簇，靠簇头进行通信。<br>\n' +
            '                                4.默认策略：根据所选终端数划分，星型拓扑（3-7个）、可靠路由（8-12个）、分簇路由（13+个）。\n' +
            '                            </div>\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                </div>\n' +
            '            </div>';

        layui.$('#help').on('click', function(){
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['600px', '350px'], //宽高
                content: html,
                shadeClose: true,
                title:'Tips'
            });
        });
    });


    //所有结点
    function allnode() {
        $.ajax({
            type: "post",
            url: "http://localhost:9876/routing/allnode",

            success: function (msg) {
                //画拓扑图
                //document.getElementById('route').innerHTML = "<canvas id=\"test\" height=\"300\" width=\"900\" style=\"border: 2px solid #e8e8e8;\"></canvas>";
                var styleElement = document.getElementById('topo');
                styleElement.style.display = '';
                nodes(msg);
            },
        });
    }
    <!--初始拓扑动画-->
    function nodes(msg) {
        //console.info(msg);
        $(document).ready(function () {
            // var canvas = document.getElementById('test');
            // var stage = new JTopo.Stage(canvas);
            // var scene = new JTopo.Scene(stage);
            stage.frames = 24;

            //加入车辆结点 并制定车辆id和位置的字典 颜色字典移动轨迹
            for (var i = 0; i < msg.length; i++) {
                //var x = 150 + i * 150;
                var carid = msg[i].id;
                var node = new JTopo.Node("Node" + carid);
                node.id = carid;
                node.textPosition = 'Bottom_Center';
                node.fontColor = '0, 0, 0'; //字体颜色
                node.setLocation(msg[i].x*6.5-20, msg[i].y*7-180 );
                node.setImage('../../static/img/datashare/manet-cluster/wrj.png', true);
                node.mouseover(function(event){
                    console.log(event);
                    console.log("mouseover");
                });
                node.mouseout(function(event){
                    console.log("mouseout");
                });
                scene.add(node);
            }

        });
    }
    //星型拓扑，班编制,传给后台一个id-list，回传一个<node>list，其中第一个是班长节点
    function startopo(data) {
        scene.clear();
        var idlist = [];
        for (var i=0;i<data.length;i++){
            idlist.push(data[i].id);
        }
        $.ajax({
            type: "post",
            url: "http://localhost:9876/routing/classLevel",
            data: {
                id: idlist
            },
            success: function (msg) {
                //画拓扑图

                //var styleElement = document.getElementById('topo');
                //styleElement.style.display = '';
                bandonghua(msg);
            },
            dataType: "json"
        });
    }

    //路由算法，排编制，传给后台一个id-list，回传一个<link>list
    function routingtopo(data) {
        var idlist = [];
        for (var i=0;i<data.length;i++){
            idlist.push(data[i].id);
        }
        $.ajax({
            type: "post",
            url: "http://localhost:9876/routing/platoonLevel",
            data: {
                id:idlist
            },
            success: function (msg) {
                var styleElement = document.getElementById('topo');
                styleElement.style.display = '';
                var styleElement = document.getElementById('input');
                styleElement.style.display = '';
                paidonghua(data,msg);
            },
            dataType: "json"
        });
    }

    <!--班编制动画-->
    function bandonghua(msg) {
        console.info(msg);
        //var msg = [{id:1},{id:2},{id:3},{id:4}];
        $(document).ready(function () {
            // var canvas = document.getElementById('test');
            // var stage = new JTopo.Stage(canvas);
            // var scene = new JTopo.Scene(stage);
            stage.frames = 24;
            var cloudNode = new JTopo.Node('MonitorNodeid：'+msg[0].id);
            //cloudNode.setSize(30, 26);
            cloudNode.setLocation(msg[0].x*6.5-20, msg[0].y*7-180 );
            cloudNode.fontColor = '0, 0, 0'; //字体颜色
            cloudNode.setImage('../../static/img/datashare/manet-cluster/wrj1-1.png', true);
            //cloudNode.layout = {type: 'circle', radius: 150};
            cloudNode.mouseover(function(event){
                console.log(event);
                console.log("mouseover");
            });

            cloudNode.mouseout(function(event){
                console.log("mouseout");
            });
            scene.add(cloudNode);

            //加入车辆结点 并制定车辆id和位置的字典 颜色字典移动轨迹
            for (var i = 1; i < msg.length; i++) {
                //var x = 150 + i * 150;
                var carid = msg[i].id;
                var node = new JTopo.Node("Node" + msg[i].id);
                node.id = carid;
                node.textPosition = 'Bottom_Center';
                node.fontColor = '0, 0, 0'; //字体颜色
                node.setLocation(msg[i].x*6.5-20, msg[i].y*7-180 );
                node.setImage('../../static/img/datashare/manet-cluster/wrj2-1.png', true);
                node.mouseover(function(event){
                    console.log(event);
                    console.log("mouseover");
                });
                node.mouseout(function(event){
                    console.log("mouseout");
                });
                scene.add(node);
                var link = new JTopo.Link(cloudNode, node);
                link.dashedPattern = 5; //虚线
                scene.add(link);
            }

            JTopo.layout.layoutNode(scene, cloudNode, true);
            //中间root节点可以控制拖动
            scene.addEventListener('mouseup', function(e){
                if(e.target && e.target.layout){
                    JTopo.layout.layoutNode(scene, e.target, true);
                }
            });
        });
    }

    <!--排编制动画-->
    function paidonghua(nodes,links) {
        // var nodes = [{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8}];
        scene.clear();
        //var links = [{from:1,to:3},{from:2,to:3},{from:4,to:6}];
        console.info(links);
        for(var i=0;i<100;i++){
            arr[i]=new Array();
            for(var j=0;j<100;j++){
                arr[i][j]=0;
            }
        }
        goodlink=[];
        badlink=[];
        $(document).ready(function () {
            // var canvas = document.getElementById('test');
            // var stage = new JTopo.Stage(canvas);
            // var scene = new JTopo.Scene(stage);
            var nodelist =[];
            stage.frames = 24;

            //加入车辆结点 并制定车辆id和位置的字典 颜色字典移动轨迹
            for (var i = 0; i < nodes.length; i++) {
                var carid = nodes[i].id;
                var x = nodes[i].x;
                var y = nodes[i].y;
                var cloudNode = new JTopo.Node("Node" + carid);
                cloudNode.textPosition = 'Bottom_Center';
                cloudNode.fontColor = '0, 0, 0'; //字体颜色
                //cloudNode.setLocation(13*x-100, 4.8*y-150); //替换成坐标
                cloudNode.setLocation(x*6.5-20, y*7-180 );
                cloudNode.setImage('../../static/img/datashare/manet-cluster/wrj2-1.png', true);
                scene.add(cloudNode);
                nodelist[carid] = cloudNode; //存一个结点表
            }
            checknode=nodelist;
            var sym=links.SYM;
            //双向链路
            for(var j=0;j<sym.length;j++){
                var link = new JTopo.Link(nodelist[sym[j].srcid], nodelist[sym[j].dstid]);
                link.dashedPattern = 10; //虚线
                link.strokeColor = '0,166,135';
                scene.add(link);
                arr[sym[j].srcid][sym[j].dstid] = link;
                arr[sym[j].dstid][sym[j].srcid] = link;
                goodlink[j]=link;
            }
            //单向链路
            var fsym=links.F_SYM;
            for(var j=0;j<fsym.length;j++){
                var link = new JTopo.Link(nodelist[fsym[j].srcid], nodelist[fsym[j].dstid]);
                link.dashedPattern = 10; //虚线
                link.arrowsRadius = 15;
                scene.add(link);
                arr[fsym[j].srcid][fsym[j].dstid] = link;
                badlink[j]=link;
            }
        });
    }

    <!--画路由线路-->
    function drawroute(fromid,toid) { //待完善，目前只有一条线

        $.ajax({
            type: "post",
            url: "http://localhost:9876/routing/showRouter",
            data: {
                src: fromid,
                dst:toid
            },
            success: function (msg) {
                console.log(msg);
                if(msg.length==2){
                    if(arr[fromid][toid]!=0){
                        scene.remove(arr[fromid][toid]);
                    }
                    if(arr[toid][fromid]!=0){
                        scene.remove(arr[toid][fromid]);
                    }
                    var link = new JTopo.Link(checknode[fromid], checknode[toid]);
                    var arrownode=link.drawanimepic("../../static/img/datashare/manet-cluster/test.png",scene);
                    link.strokeColor="255,0,255";//圆边
                    scene.add(link);

                }else {
                    //两条
                    if(arr[msg[0]][msg[1]]!=0){
                        scene.remove(arr[msg[0]][msg[1]]);
                    }
                    if(arr[msg[1]][msg[0]]!=0){
                        scene.remove(arr[msg[1]][msg[0]]);
                    }
                    if(arr[msg[1]][msg[2]]!=0){
                        scene.remove(arr[msg[1]][msg[2]]);
                    }
                    if(arr[msg[2]][msg[1]]!=0){
                        scene.remove(arr[msg[2]][msg[1]]);
                    }
                    var link1 = new JTopo.Link(checknode[msg[0]], checknode[msg[1]]);
                    var arrownode=link1.drawanimepic("../../static/img/datashare/manet-cluster/test.png",scene);
                    link1.strokeColor="255,0,255";//圆边
                    var link2 = new JTopo.Link(checknode[msg[1]], checknode[msg[2]]);
                    var arrownode=link2.drawanimepic("../../static/img/datashare/manet-cluster/test.png",scene);
                    link2.strokeColor="255,0,255";//圆边
                    scene.add(link1);
                    scene.add(link2);

                }
            },
        });
    }

    function reset(){
        scene.clear();
        for (var i=0;i<checknode.length;i++){
            if (checknode[i]) {
                scene.add(checknode[i]);
            }
        }
        for (var i=0;i<goodlink.length;i++){
            scene.add(goodlink[i]);
        }
        for (var i=0;i<badlink.length;i++){
            scene.add(badlink[i]);
        }

    }

    function liantopo(data) {
        var idlist = [];
        for (var i=0;i<data.length;i++){
            idlist.push(data[i].id);
        }
        $.ajax({
            type: "post",
            url: "http://localhost:9876/devide/companyLevel",
            data: {
                id: idlist
            },
            success: function (msg) {
                //画拓扑图
                //document.getElementById('route').innerHTML = "<canvas id=\"test\" height=\"300\" width=\"900\" style=\"border: 2px solid #e8e8e8;\"></canvas>";
                var styleElement = document.getElementById('topo');
                styleElement.style.display = '';
                var styleElement = document.getElementById('input');
                styleElement.style.display = '';
                devide(msg);
            },
            dataType: "json"
        });
    }

    // 连编制的msg是一个包含多个节点idlist的list。[[1,2,3...],[5,6,...],[7，8,..],[...]，...]
    // 里面每个小list，最少3个节点id，最多包含7个节点id（簇内星型拓扑），与星型拓扑一样，第一个节点是簇头。
    function devide(msg) {
        scene.clear();
        var nodelist=[];
        for(var i=0;i<100;i++){
            arr[i]=new Array();
            for(var j=0;j<100;j++){
                arr[i][j]=0;
            }
        }
        $(document).ready(function(){
            var onenode=[]; //cutou
            var len =Object.keys(msg).length;
            for (var i = 0; i < len; i++) {
                var temp = msg[i];
                var container = new JTopo.Container('簇编号：'+(i+1));
                container.textPosition = 'Middle_Center';
                container.fontColor = '0,0,0';
                container.font = '10pt 微软雅黑';
                container.fillColor = '232,232,232';
                container.borderColor = '0,0,0';
                container.borderRadius = 20; // 圆角
                scene.add(container);

                var cloudNode = new JTopo.Node('MonitorNodeid：'+temp[0].id);
                //cloudNode.setSize(30, 26);
                //cloudNode.setLocation(20+ Math.random() * 400+150*i, 20+ Math.random() * 200+30*i);
                cloudNode.id = temp[0].id
                cloudNode.setLocation(temp[0].x*6.5-20, temp[0].y*7-180);
                cloudNode.fontColor = '0, 0, 0'; //字体颜色
                cloudNode.setImage('../../static/img/datashare/manet-cluster/wrj1.png', true);
                //cloudNode.layout = {type: 'circle', radius: 120};
                scene.add(cloudNode);
                container.add(cloudNode);
                onenode[i]=cloudNode;
                nodelist[temp[0].id] = cloudNode;
                map.set(temp[0].id,[temp[0].id]);
                //加入车辆结点 并制定车辆id和位置的字典 颜色字典移动轨迹
                for (var j = 1; j < temp.length; j++) {
                    //var x = 150 + i * 150;
                    var carid = temp[j].id;
                    var node = new JTopo.Node("Node" + temp[j].id);
                    node.id = carid;
                    node.textPosition = 'Bottom_Center';
                    node.fontColor = '0, 0, 0'; //字体颜色
                    //node.setLocation(10+Math.random() * 200+250*i, 10+ Math.random() * 200+50*i);
                    node.setLocation(temp[j].x*6.5-20, temp[j].y*7-180);
                    node.setImage('../../static/img/datashare/manet-cluster/wrj.png', true);
                    scene.add(node);
                    container.add(node);
                    var link = new JTopo.Link(cloudNode, node);
                    link.dashedPattern = 5; //虚线
                    scene.add(link);
                    nodelist[temp[j].id] = node;
                    map.set(temp[j].id,[temp[0].id,link]);
                }

            }

            for(var i=0;i<onenode.length;i++){
                for(var j=i+1;j<onenode.length;j++){
                    var link = new JTopo.Link(onenode[i],onenode[j]);
                    link.dashedPattern = 10; //虚线
                    link.strokeColor = '0,150,136';
                    scene.add(link);
                    arr[onenode[i].id][onenode[j].id] = link;
                    arr[onenode[j].id][onenode[i].id] = link;
                }
            }
            //console.info(map);
            checknode = nodelist;
            console.info(checknode);
        });
    }

    //画分簇的路由结果
    function drawdevideroad(fromid,toid) {
        console.info(map);
        let a = map.get(parseInt(fromid)); //把字符变成int
        let b = map.get(parseInt(toid));
        console.info(a,b);
        if(a[0]==b[0]){ //同一簇内不同节点
            if(a[0]!=fromid&&a[0]!=toid) {
                scene.remove(a[1]);
                scene.remove(b[1]);
                var link1 = new JTopo.Link(checknode[fromid], checknode[a[0]]);
                var arrownode = link1.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link1.strokeColor = "255,0,255";//圆边
                var link2 = new JTopo.Link(checknode[a[0]], checknode[toid]);
                var arrownode = link2.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link2.strokeColor = "255,0,255";//圆边
                scene.add(link1);
                scene.add(link2);
            }else if(a[0]!=fromid&&a[0]==toid){
                scene.remove(a[1]);
                var link1 = new JTopo.Link(checknode[fromid], checknode[a[0]]);
                var arrownode = link1.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link1.strokeColor = "255,0,255";//圆边
                scene.add(link1);
            }else if(a[0]==fromid&&a[0]!=toid){
                scene.remove(b[1]);
                var link1 = new JTopo.Link(checknode[fromid], checknode[toid]);
                var arrownode = link1.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link1.strokeColor = "255,0,255";//圆边
                scene.add(link1);

            }
        }else {
            if(fromid!=a[0]&&toid!=b[0]) {
                scene.remove(a[1]);
                scene.remove(b[1]);
                console.info(arr);
                scene.remove(arr[a[0]][b[0]]);
                var link3 = new JTopo.Link(checknode[fromid], checknode[a[0]]);
                var arrownode = link3.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link3.strokeColor = "255,0,255";//圆边
                var link4 = new JTopo.Link(checknode[a[0]], checknode[b[0]]);
                var arrownode = link4.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link4.strokeColor = "255,153,51";//圆边
                var link5 = new JTopo.Link(checknode[b[0]], checknode[toid]);
                var arrownode = link5.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link5.strokeColor = "255,0,255";//圆边
                scene.add(link4);
                scene.add(link5);
                scene.add(link3);
            }else if(fromid!=a[0]&&toid==b[0]){
                scene.remove(a[1]);
                scene.remove(arr[a[0]][b[0]]);
                var link3 = new JTopo.Link(checknode[fromid], checknode[a[0]]);
                var arrownode = link3.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link3.strokeColor = "255,0,255";//圆边
                var link4 = new JTopo.Link(checknode[a[0]], checknode[b[0]]);
                var arrownode = link4.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link4.strokeColor = "255,153,51";//圆边
                scene.add(link4);
                scene.add(link3);
            }else if(fromid==a[0]&&toid!=b[0]){
                scene.remove(b[1]);
                scene.remove(arr[a[0]][b[0]]);
                var link4 = new JTopo.Link(checknode[a[0]], checknode[b[0]]);
                var arrownode = link4.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link4.strokeColor = "255,153,51";//圆边
                var link5 = new JTopo.Link(checknode[b[0]], checknode[toid]);
                var arrownode = link5.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link5.strokeColor = "255,0,255";//圆边
                scene.add(link4);
                scene.add(link5);
            }else if(fromid==a[0]&&toid==b[0]){
                scene.remove(arr[a[0]][b[0]]);
                var link4 = new JTopo.Link(checknode[a[0]], checknode[b[0]]);
                var arrownode = link4.drawanimepic("../../static/img/datashare/manet-cluster/test.png", scene);
                link4.strokeColor = "255,153,51";//圆边
                scene.add(link4);
            }
        }
    }
</script>

<!--jtopo画箭头-->
<script>
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    JTopo.Link.prototype.drawanimepic=function(imgurl,scene,width,height){ //箭头图案、画布 ，大小
        var imgnode=new JTopo.Node();

        imgnode.setSize(width?width:16,height?height:16);
        imgnode.setImage(imgurl);
        imgnode.zIndex=2.5;
        var thislink=this;
        this.isremove=false;
        function b(a, b) {
            var c = [];
            if (null == a || null == b) return c;
            if (a && b && a.outLinks && b.inLinks) for (var d = 0; d < a.outLinks.length; d++) for (var e = a.outLinks[d], f = 0; f < b.inLinks.length; f++) {
                var g = b.inLinks[f];
                e === g && c.push(g)
            }
            return c
        }
        function c(a, c) {
            var d = b(a, c),
                e = b(c, a),
                f = d.concat(e);
            return f
        }
        function d(a) {
            var b = c(a.nodeA, a.nodeZ);
            return b = b.filter(function(b) {
                return a !== b
            })
        }
        thislink.removeHandler = function() {
            this.isremove=true;
            var a = this;
            this.nodeA && this.nodeA.outLinks && (this.nodeA.outLinks = this.nodeA.outLinks.filter(function(b) {
                return b !== a
            })),
            this.nodeZ && this.nodeZ.inLinks && (this.nodeZ.inLinks = this.nodeZ.inLinks.filter(function(b) {
                return b !== a
            }));
            var b = d(this);
            b.forEach(function(a, b) {
                a.nodeIndex = b
            })
        };
        function imgnodeanime(){
            if(!thislink.isremove){
                if(thislink.nodeA.outLinks){
                    var xs=thislink.nodeA.cx- thislink.nodeZ.cx,
                        xy=thislink.nodeA.cy- thislink.nodeZ.cy,
                        l = Math.floor(Math.sqrt(xs * xs + xy * xy)),
                        j=l;
                    xl=xs/ l, yl=xy/l;
                    var animespeed=(new Date()/33);
                    var colorpoint=parseInt(animespeed%l);
                    imgnode.rotate=(Math.atan(xy/xs))+(xs>0?Math.PI:0);
                    imgnode.cx=thislink.nodeA.cx-colorpoint*xl;
                    imgnode.cy=thislink.nodeA.cy-colorpoint*yl;
                    window.requestAnimationFrame(imgnodeanime);
                }
            }else{
                scene.remove(imgnode)
            }
        }
        window.requestAnimationFrame(imgnodeanime);
        scene.add(imgnode);
        return imgnode;
    };
</script>


</body>
</html>